<template>
  <div>
    <Editor v-model="content" :init="myTinyInit"></Editor>
  </div>
</template>

<script setup name="TinymceEditor">
import {computed, defineEmits, defineProps, onMounted, reactive, ref, watch} from 'vue'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver'
import 'tinymce/models/dom/model'
//按需引入插件
import 'tinymce/plugins/image'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/link'
import 'tinymce/plugins/help'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/code'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/fullscreen'

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  plugins: {
    type: [String, Array],
    default: 'lists link image table help wordcount code preview fullscreen fontsize',
  },
  toolbar: {
    type: [String, Array],
    default:
        'undo redo formatselect fontsize bold italic forecolor backcolor lineheight alignleft aligncenter alignright alignjustify bullist numlist subscript superscript outdent indent table image code preview fullscreen',
  },
})
const emit = defineEmits(['input'])

const myTinyInit = reactive({
  width: '100%',
  height: 500, // 默认高度
  language_url: '/tinymce/langs/zh_CN.js', // 配置汉化
  language: 'zh_CN', // 语言标识
  branding: false, // 不显示右下角logo
  auto_update: false, // 不进行自动更新
  resize: true, // 可以调整大小
  menubar: 'file edit insert view format table', // 菜单栏
  skin_url: '/tinymce/skins/ui/oxide', // 手动引入CSS
  content_css: '/tinymce/skins/content/default/content.css', // 手动引入CSS
  toolbar_mode: 'wrap',
  plugins: props.plugins, // 插件
  toolbar: props.toolbar, // 功能按钮
  //图片上传方法（注意！！：要使用 promise 对象中的 resolve 返回图片路径，否则会报错）
  images_upload_handler: (blobInfo) =>
      new Promise((resolve, reject) => {
        // 获取到文件流数据
        console.log(blobInfo.blob())
        let formData = new FormData()
        formData.append('file', blobInfo.blob(), blobInfo.filename())
        // 为了方便测试，返回一张固定的在线图片
        resolve('https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/image-20230512090059968.png')
        // 请求真实的上传图片接口获取在线地址并通过resolve返回
        // axios
        //   .post(`/api/backend/upload`, formData, {
        //     headers: {
        //       'Content-Type': 'multipart/form-data',
        //       Authorization: 'Bearer ' + store.state.user.accessToken,
        //     },
        //   })
        //   .then((res) => {
        //     if (res.data.code === 1) {
        //       resolve(`/image_manipulation${res.data.data.filePath}`)
        //     } else {
        //       ElNotification.warning(res.data.msg)
        //     }
        //   })
        //   .catch((error) => {
        //     reject(error)
        //   })
      }),
})

const initContent = computed(() => {
  return props.modelValue
})

onMounted(() => {
  tinymce.init({})
})

const content = ref()
watch(
    initContent,
    (newVal) => {
      content.value = newVal
    },
    {deep: true, immediate: true}
)

watch(
    content,
    (newVal) => {
      emit('input', newVal)
    },
    {deep: true}
)
</script>

<style scoped lang="scss"></style>
